<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
  <meta charset="UTF-8">
  <title>品牌删除添加</title>
  <script src="lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="lib/bootstrap-3.3.7.css">
</head>
<body>
  <div id="app">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">品牌后台管理系统</h3>
      </div>
      <div class="panel-body form-inline">
       <label>
         ID:
         <input v-model="id"  type="text" class="form-control" >
       </label>
        <label>
          Name:
          <input v-model="name" type="text" class="form-control">
        </label>
        <input type="button" value="添加" class="btn btn-primary" @click="add">
        <label>
          搜索商品：
          <input v-model="seek" type="text" class="form-control">
        </label>
      </div>
    </div>

    <table class="table table-hover table-bordered table-striped">
      <thead>
      <tr>
        <th>序号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,i) in search(seek)" :key="i">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.time}}</td>
        <td><input type="button" class="btn btn-primary" value="删除" @click.prevent="del(item.id)"></td>
      </tr>
      </tbody>
    </table>
  </div>
</body>
<script src="main.js"></script>
</html>